
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        :permission="permissionList"
        v-bind="bindVal"
        v-on="onEvent"
        :page.sync="page"
      >
        <template slot="menuLeft">
          <el-button type="primary" size="small" @click="approval">提 交</el-button>
          <el-button type="primary" size="small" v-if="false" @click="handleExport">导 出</el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            :size="scope.size"
            :type="scope.type"
            v-if="scope.row.approvalStatus=='0'"
            @click.stop="myEdit(scope.row)"
          >编辑</el-button>
          <el-button
            icon="el-icon-view"
            :size="scope.size"
            :type="scope.type"
            @click.stop="myView(scope.row)"
          >预览</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <open-dialog :DialogVisible.sync="editDialogVisible" title="编辑">
      <div style="min-height: 36px;line-height:36px;margin-top:4px;">记账时间：{{this.accountTime}}</div>
      <el-row type="flex" justify="center">
        <div
          style="min-height: 26px;background: #99a9bf;line-height:36px;margin-top:4px;width:99%"
        >电子回执单明细</div>
      </el-row>
      <avue-crud :data="detailData" :option="tableOptionDetailEdit"></avue-crud>
      <el-row  type="flex" justify="center" style="margin-top:50px;">
        <el-button type="primary" @click="edit">保存</el-button>
        <el-button type="primary" @click="editDialogVisible=false">取消</el-button>
      </el-row>
    </open-dialog>
    <open-dialog :DialogVisible.sync="viewDialogVisible" title="预览">
      <div style="min-height: 36px;line-height:36px;margin-top:4px;">记账时间：{{this.accountTime}}</div>
      <el-row type="flex" justify="center">
        <div
          style="min-height: 26px;background: #99a9bf;line-height:36px;margin-top:4px;width:99%"
        >电子回执单明细</div>
      </el-row>
      <avue-crud :data="detailData" :option="tableOptionDetail"></avue-crud>
      <el-row type="flex" justify="center" style="margin-top:50px;">
        <el-button @click="viewDialogVisible=false">返回</el-button>
      </el-row>
    </open-dialog>
  </div>
</template>

<script>
import {
  getCascadeObj,
  approvalObj,
} from "@/api/subwaystm/swstelectronicreceipt";
import {
  putObjs
} from "@/api/subwaystm/swstelectronicreceiptdetails";
import { tableOptionDetail } from "@/const/crud/subwaystm/swstelectronicreceiptdetails";
import { tableOptionDetailEdit } from "@/const/crud/subwaystm/swstelectronicreceiptdetails";
import baseCrud from '@/mixins/base-crud'
import { mapGetters } from 'vuex'

export default {
  name: "swstelectronicreceipt",
  mixins: [baseCrud('subwaystm/swstelectronicreceipt')],
  data() {
    return {
      tableOptionDetail: tableOptionDetail,
      tableOptionDetailEdit: tableOptionDetailEdit,
      detailData: [],
      accountTime: "",
      viewDialogVisible: false,      
      editDialogVisible: false,
    };
  },
  watch:{
    cashData() {
      this.detailData = this.cashData;
    },
    detailData : {
      handler(newValue,oldValue){
        for(var i= 0;i<newValue.length;i++){
          if(newValue[i].ticketTransferAmount){
            newValue[i].diffAmount =  newValue[i].ticketTransferAmount - newValue[i].ticketSellAmount;
          }
        }
      },
      immediate:true,
      deep:true
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.vaildData(
          this.permissions.swstelectronicreceipt_add,
          false
        ),
        delBtn: this.vaildData(
          this.permissions.swstelectronicreceipt_del,
          false
        ),
        editBtn: this.vaildData(
          this.permissions.swstelectronicreceipt_edit,
          false
        ),
      };
    },
  },
  methods: {
    approval: function () {
      let tableSelect = this.$refs.crud.tableSelect
      if (tableSelect.length < 1) {
        this.$message.info("请选择要提交的记录");
        return false;
      }
      let ids = tableSelect.map(row => row.id)
      approvalObj({
            ids: ids.join(','),
            status: "1",
      }).then((data) => {
        this.$message.success("提交成功")
        this.getList(this.page)
      })
    },
    myView: function (row) {
      getCascadeObj(row.id)
        .then((response) => {
          let res = response.data.data;
          this.detailData = res.electronicReceipts;
          this.accountTime = res.receipt.accountTime;
        })
        .then(() => {
          this.viewDialogVisible = true;
        });
    },
    myEdit: function (row) {
      getCascadeObj(row.id)
        .then((response) => {
          let res = response.data.data;
          this.detailData = res.electronicReceipts;
          this.accountTime = res.receipt.accountTime;
          for (const item of this.detailData) {
          item.$cellEdit = true;
        }
        })
        .then(() => {
          this.editDialogVisible = true;
        });
    },
    edit: function () {
      let ids = '';
      let datas = '';
      for(let k=0;k<this.detailData.length;k++){
        if(this.detailData[k].ticketTransferAmount ==null || this.detailData[k].ticketTransferAmount ==''){
          this.$message.info("请填写"+parseInt(k+1)+ "行转账金额！");
          return false;
        }
      }
      putObjs(this.detailData)
          .then((data) => {
            //console.log("detailData=======2====="+JSON.stringify(this.detailData[k].id))
            this.$message.success("修改成功");
            this.getList(this.page);
            this.editDialogVisible = false;
            done();
          })
          .catch(() => {});
        }
  }
}
</script>
